﻿@*@model IEnumerable<CarparkIMS_Model.llqqPlateLog>*@
@model IEnumerable<llqqPlateLogViewModel>
@{
    ViewData["Title"] = "即時記錄";
    Layout = null;
}
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />

<link href="~/css/stylerealtime.css" rel="stylesheet" />

<div id="connection" class="float-right"><h3 id="connectionState"></h3></div>

<div class="main container-fluid" style="max-width:1500px;">
    <div class="row">
        <div class="left" hidden>
            <div style="height:48%;width:100%;" class='bg'>
                <h1 id="in_titledate">IN</h1>
                <h2 id="in_plate"></h2>
                <div class="plate">
                    <img id="in_img" />
                </div>
            </div>
            <div style="height:4%"></div>
            <div style="height:48%;width:100%;" class='bg'>
                <h1 id="out_titledate">OUT</h1>
                <h2 id="out_plate"></h2>
                <div class="plate">
                    <img id="out_img" />
                </div>
            </div>
        </div>
        <div class="right col-12">
            <div class="tableContainer" style="height:100%;overflow-y:auto;overflow-x:hidden">
                <table class="table records">
                    <thead class="bg">
                        <tr>
                            <th>
                                @Html.DisplayNameFor(model => model.date)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.plate)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.isValid)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.ip)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.image64)
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.date)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.plate)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.isValidPlate)
                                </td>
                                <td>
                                    <span class="text-dark mr-2">@item.ip</span><span class="text-black-50">/@item.ParkingPlaceId</span>
                                </td>
                                <td>
                                    <img data-src="@Url.Action("GetImage","PlateRecognize",new {Id=item.ID })" style="display:inline-block;" class="img-carplate lazy-load" />
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

  
<script>
    const imgUrl = "@Url.Action("GetImage","PlateRecognize")/"

    document.addEventListener('DOMContentLoaded', function () {
        let options = {
            root: document.querySelector('.tableContainer'),
            rootMargin: '0px 0px 125px 0px',
            threshold: 0
        }

        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target
                    observer.unobserve(img)
                    img.src = img.dataset.src
                    delete img.dataset.src
                }
            });
        }, options);

        document.querySelectorAll('img.lazy-load').forEach(ele => observer.observe(ele))

        document.querySelectorAll('#in_img, #out_img').forEach(img => img.addEventListener('load', e => {
            e.target.classList.add("slideIn")
        }))

        document.querySelectorAll('#in_img, #out_img').forEach(img => img.addEventListener('animationend', e => {
            e.target.classList.remove("slideIn")
        }))
    })

</script>

<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/noti.js"></script>